<script lang="ts" setup>
import { Icon } from "@vicons/utils";
import { PlayCircleOutlined, LockTwotone } from "@vicons/material";

const props = defineProps<{
  courseItem: CourseItem;
  courseItemDetail: CourseVideo | CourseArticle | CourseLive;
  purchased: boolean;
  currCourseItemId?: CourseItem["id"];
}>();

// 分钟转换成秒
const convertToMinute = (seconds: number) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
};

const typeMapper = {
  1: "视频",
  2: "图文",
  3: "题目",
  4: "直播",
};

const statusMapper = {
  "0": "看回放",
  "1": "直播中",
  "-1": "未开播",
};

// 是否展示免费试看文本
const showFree = computed(() => {
  const courseItem = props.courseItem;
  const purchased = props.purchased;
  // 未购买 免费试看
  return !purchased && courseItem.isFree;
});
</script>

<template>
  <div>
    <div class="py-3 b-b-1 b-b-gray-2 relative" :class="[currCourseItemId == courseItem.id ? 'text-blue-400' : '']">
      <h3 class="text-base">{{ courseItem.itemName }}</h3>
      <p v-if="courseItem.itemDesc" class="mt-1 text-sm">
        {{ courseItem.itemDesc }}
      </p>
      <span v-if="purchased && courseItem.studyProgress && courseItem.courseItemType != 4" class="absolute right-1 top-4"
        >已学习 {{ courseItem.studyProgress }}%</span
      >
      <span v-if="showFree" class="absolute right-1 top-4 text-blue-400 bg-blue-100 px-2 py-0.5 text-xs rounded-full">免费</span>
      <div class="mt-4 flex items-center justify-between gap-3 text-sm text-gray-4">
        <div class="flex items-center">
          <span class="text-xs mr-2 py-.5 px-2 b-1 b-gray-4 rd-md">{{ typeMapper[courseItem.courseItemType] }}</span>

          <!-- 课程 播放logo+时长 -->
          <div class="grow flex items-center gap-1" v-if="courseItem.courseItemType == 1">
            <Icon class="text-lg">
              <PlayCircleOutlined />
            </Icon>
            <span>
              {{ convertToMinute((courseItemDetail as CourseVideo)?.videoDuration || 0) }}
              时长</span
            >
          </div>
          <!-- 直播  -->
          <div v-if="courseItem.courseItemType == 4">
            <p class="c-gray-5 text-sm">
              {{ courseItem.liveTime }}
              <span
                >| <span :class="[courseItem.liveStatus == 1 ? 'text-blue-500' : '']">{{ statusMapper[courseItem.liveStatus] }}</span></span
              >
            </p>
          </div>
        </div>
        <Icon class="text-lg mr-4" v-if="!purchased && !showFree">
          <LockTwotone />
        </Icon>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
